<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src='./vue.min.js'></script>
    <script src='./vue-split-drag-pane.umd.min.js'></script>
</head>
<style>
    html,body{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #app{
        width:100%;
        height: 100%;
    }
</style>
<body>
<div id="app" style="width:100%;height: 100%;">
    <split-drag-pane  @change="change" :span="10">
        <split-drag-pane default-percent="200px" vmid="1" @change="change">
            <div style="width: 100%;height: 100%;background-color: aqua;">
                1
            </div>
        </split-drag-pane>
        <split-drag-pane  vmid="2" default-percent="calc(70% - 200px)" @change="change" :span="20">
            <div style="width: 100%;height: 100%;background-color: bisque;">
                2
            </div>
        </split-drag-pane>
        <split-drag-pane default-percent="30" vmid="3" split="horizontal" @change="change">
            <split-drag-pane default-percent="30" vmid="3-1" @change="change">
                <div style="width: 100%;height: 100%;background-color: #07a1f3;">
                    3-1
                </div>
            </split-drag-pane>
            <split-drag-pane default-percent="40" vmid="3-2" @change="change">
                <div style="width: 100%;height: 100%;background-color: #9cf3a9;">
                    3-2
                </div>
            </split-drag-pane>
            <split-drag-pane default-percent="30" vmid="3-3" @change="change">
                <div style="width: 100%;height: 100%;background-color: #f3e0a7;">
                    3-3
                </div>
            </split-drag-pane>
        </split-drag-pane>
    </split-drag-pane>
</div>
<script>
    var Main = {
        name: 'test',
        methods: {
            change:function(val,vmid) {
                console.log("val,vmid",val,vmid
                )
            }
        }
    };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</body>

</html>

